<template>
    <el-dialog :model-value="dialogFormVisible" :destroy-on-close="true" title="商品信息" width="450px"
        @close="emits('closeDialog')">
        <el-form ref="dialogFormRef" :model="dialogForm" :rules="rules" :label-width="formLabelWidth">
            <!-- <el-form-item label="名字" prop="name">
                <el-input v-model="dialogForm.name" />
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input v-model="dialogForm.description" />
            </el-form-item>
            <el-form-item label="数量" prop="amount">
                <el-input v-model="dialogForm.amount" />
            </el-form-item>
            <el-form-item label="ios价格" prop="ios_price">
                <el-input v-model="dialogForm.ios_price" />
            </el-form-item>

            <el-form-item label="android价格" prop="android_price">
                <el-input v-model="dialogForm.android_price" />
            </el-form-item> -->
            <el-form-item label="设备类型" prop="client_type">
                <el-select v-model="dialogForm.client_type" placeholder="设备类型">
                    <el-option label="android" value="android"></el-option>
                    <el-option label="ios" value="ios"></el-option>
                    <!-- <el-option label="all" value="all"></el-option> -->
                </el-select>
            </el-form-item>
            <el-form-item label="是否强更" prop="is_required">
                <el-select v-model="dialogForm.is_required" placeholder="是否强更">
                    <el-option label="是" value="1"></el-option>
                    <el-option label="否" value="0"></el-option>
                    <!-- <el-option label="all" value="all"></el-option> -->
                </el-select>
            </el-form-item>
            <el-form-item label="APP版本" prop="app_mark">
                <el-select v-model="dialogForm.app_mark" placeholder="APP版本">
                    <el-option label="norm" value="norm"></el-option>
                    <el-option label="cash" value="cash"></el-option>
                    <!-- <el-option label="all" value="all"></el-option> -->
                </el-select>
            </el-form-item>
            <el-form-item label="版本号" prop="client_version">
                <el-input v-model="dialogForm.client_version" />
            </el-form-item>

            <el-form-item label="版本Code" prop="client_code" >
                <el-input v-model="dialogForm.client_code" />
            </el-form-item>
            <el-form-item label="下载链接" prop="app_link">
                <el-input v-model="dialogForm.app_link" />
            </el-form-item>
            <el-form-item label="APP名称" prop="app_name">
                <el-input v-model="dialogForm.app_name" />
            </el-form-item>
            <el-form-item label="更新内容" prop="update_note">
                <el-input v-model="dialogForm.update_note" />
            </el-form-item>
            <el-form-item label="id" style="display: none">
                <el-input v-model="dialogForm.id" disabled />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emits('cancel')">取消</el-button>
                <el-button type="primary" @click="submit(dialogForm)" :loading="btnLoading">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from "vue";
const dialogFormRef = ref(null);

defineProps({
    dialogFormVisible: {
        type: Boolean,
        default: false
    },
    dialogForm: {
        type: Object,
        default: {
            client_type:"设备类型",
            client_version:"版本号",
            update_note:"	更新内容",
            is_required:"是否强更(0:否 1：是)",
            app_link:"下载链接",
            app_mark:"app标识 (norm, cash)",
            client_code:"版本code",
            app_name:"项目名称(下拉选项值: weslots, official, notebook)",
            id: "自增id",
            // name: "",
            // description: "",
            // amount: "",
            // ios_price: "",
            // android_price: "",
            // app_mark: "",
            // android_price: "android价格",
            // goods_id: "谷歌市场商品id",
            // price: "基准定价价格",
            // show_price: "展示价格",
            // currency: "基准币种",
            // currency_symbol: "基准币种符号",
            // show_currency: "展示法币",
            // show_symbol: "展示法币符号",
            // rank: "排序"
        }
    },
    btnLoading: {
        type: Boolean,
        default: false
    }
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm"]);

const formLabelWidth = "120px";
// 校验
const rules = {
    name: [{ required: true, message: "请输入名字", trigger: "blur" }],
    description: [{ required: true, message: "请输入描述", trigger: "blur" }],
    amount: [{ required: true, message: "请输入钻石数量", trigger: "blur" }],
    ios_price: [{ required: true, message: "请输入ios价格", trigger: "blur" }],
    android_price: [
        { required: true, message: "请输入iandroid价格", trigger: "blur" }
    ],
    app_mark: [{ required: true, message: "请选择APP版本", trigger: "blur" }]
};

// 提交
const submit = dialogForm => {
    dialogFormRef.value
        .validate()
        .then(async () => {
            try {
                emits("submitForm", dialogForm);
            } catch (error) {
                console.log(error);
            }
        })
        .catch(error => {
            console.log(error);
        });
};
</script>
